<!-- 词云图（右） -->
<template>
  <div class="course-portrait">
    <div class="title">学员省份画像</div>
    <div class="ciyun" ref="chart"></div>
  </div>
</template>

<script>
export default {
  props:['wordCloud'],
  //图表实例
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const colors = ['#9fdfd3', '#c47f3b', '#d15657', '#c47f3b', '#ee5556', '#a4d5cf', '#c38c55', '#49d0bf', '#d15657', '#7f5f7a', '#5bb3a8'];
      //2.基于准备好的dom，初始化echarts实例
      let chart = this.$echarts.init(this.$refs.chart);
      //3.配置数据
      let option = {
        series: {
          type: 'wordCloud',
          //maskImage: maskImage,
          sizeRange: this.wordCloud.sizeRange,
          rotationRange: [0, 0],
          rotationStep: 45,
          gridSize: 8,
          shape: 'circle',
          left: 'center',
          top: 'center',
          width: '90%',
          height: '70%',
          textStyle: {
            color: v => (
              `${colors[v.dataIndex]}`
            ),
            fontFamily: '微软雅黑',
            fontWeight: 'bold',
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data:this.wordCloud.provinces
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderColor: 'rgba(50,50,50,0.7)',
          valueFormatter: (value) => value,
          textStyle: {
            color: '#fefdfd'
          }
        },
      };
      // 4.传入数据
      chart.setOption(option);

      // 在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。
      window.onresize = function () {
        chart.resize()
      }
    }
  }
};
</script>

<style lang="less" scoped>
.course-portrait {
  width: 100%;
  height: 310px;
  background-color: #ffffff;

  .title {
    height: 40px;
    line-height: 40px;
    padding-left: 8px;
    padding-right: 30px;
    color: rgb(85, 85, 85);
    text-align: left;
    font-size: 14px;
  }

  .ciyun {
    height: 270px;
  }
}
</style>